<template>
	<view class="components-home">
		<!-- 顶部搜索 -->
		<luyj-search-bar :radius="100" @confirm="search" @cancel="cancel"></luyj-search-bar>
		
		<view style="padding: 30rpx;">
			<!-- <u-swiper
			              :list="Links"
			              @change="e => current = e.current"
			              :autoplay="true"
						  :border-radius="30"
						  name="logo"
			      >
			</u-swiper> -->
			<!-- <view class="notice-item" v-for="item in Links" :key="item.id" >
				<view
					class="content"
					@tap="navTo(`/pages/index/notice/detail?id=${item.id}`)"
				>
					<text class="title">{{ item.title }}</text>
					<view class="img-wrapper" v-if="item.logo">
						<image class="pic" :src="item.logo"></image>
					</view>
					<text class="introduce" v-if="item.desc">
						{{ item.desc }}
					</text>
					
					<text class="time">{{ item.createtime | time }}</text>
				</view>	
			</view> -->
			<view class="notice-item" @click="navTo('/pages/news/news')">
				<text >
					公告
				</text>
			</view>
			
			
			<view style="text-align: center;margin-top: 30rpx;color: #7c7c7c;">
				<text> 当前有{{userinfo.decScore}}积分24h后清零</text>
			</view>
		</view>
		
		<view class="my-tab-box">
			<my-tab ref="myTab" :list="tabList" @change="changeTab" :currentIndex="tabIndex" name="title"></my-tab>
		</view>
		
		<view>
			<my-list ref="myList"
				:api="productList" :params="params" :transformRequestData="transformRequestData">>
				<template v-slot:card="{list}">
					<view class="product-list-wrapper">
						<rf-product-list :bottom="0" :list="list" :isList="false"
							:style="{paddingTop: 10 + 'rpx' }"></rf-product-list>
					</view>
				</template>
			</my-list>
		</view>
		
		
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import rfProductList from '@/components/rf-product-list';
	import moment from '@/common/moment';
	export default {
		components: {
			rfProductList
		},
		data() {
			return {
				cardCur: 0,
				bannerList: [
				],
				Links: [
					require('@/static/mao/mm......00.png'),
					require('@/static/mao/mm......0011.png'),
					require('@/static/mao/2nn00.png'),
					require('@/static/mao/msss.png'),
				],
				tabList: [
					{
						id:0,
						title:"近期上新"
					},
				],
				tabIndex:0,
				modalName: null, //会员弹窗
				userinfo:{
					money:0,
					decScore:0
				},
				tabId:0,
				keyword:"",
				scrollable:true
			}
		},
		filters: {
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD HH:mm');
			}
		},
		computed:{
			params() {
				return {
					tabId: this.tabIndex,
					limit:10,
					cate_id:this.tabId,
					keyword:this.keyword
				};
			}
		},
		created() {
			let urlParams=  this.$route.query;
			if(urlParams.tabId){
				this.tabId = urlParams.tabId;
			}
			this.init();
		},
		onShow() {
			
		},
		
		onPullDownRefresh() {
			this.$refs.myList.onRefresh();
		},
		onReachBottom() {
			this.$refs.myList.onMore();
		},
		mounted() {
		    var that=this;
		    uni.$on('onReachBottom', function(data) {
		        that.$refs.myList.onMore();
		    });
		},
		methods: {
			
			init(){
				// let opts = {
				// 	url: 'api/notices/list',
				// 	method: 'get'
				// };
				// request.httpRequest(opts).then((res)=>{
				// 	this.Links = res.data.data;
					
				// });
				
				let opts2 = {
					url:  'api/gashapons/guan',
					method: 'get'
				};
				request.httpRequest(opts2).then((res)=>{
					// this.tabList = res.data.data.data;
					res.data.data.data.forEach((item,i) => {
						this.tabList.push({
							id:item.id,
							title:item.title
						})
						if(this.tabId == item.id){
							this.tabIndex = i+1;
							console.log('666',item);
							console.log('index',this.tabIndex);
						}
					})
				});
			},
			search(e){
				this.keyword = e.value;
			},
			cancel(){
				this.keyword = "";
			},
			changeTab(e) {
				this.tabIndex = e.index;
				this.tabId = e.item.id;
			},
			transformRequestData(data) {
				
				return data.data.data.data;
			},
			productList(value) {
				let opts = {
					url: 'api/gashapons/pro',
					method: 'get'
				};
				const result =  request.httpRequest(opts, value);
				return result;
			
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 9999;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: #FFFFFF;
		opacity: 0.6;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -130rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: #0081ff;
	}

	.bgImg {
		position: relative;
		margin-bottom: 100rpx;

		.left_box {
			position: absolute;
			height: 130rpx;
			width: 60%;
			background: #ffffff;
			bottom: -55rpx;
			left: 5%;
			border-radius: 15rpx;
		}

		.right_box {
			text-align: center;
			position: absolute;
			height: 130rpx;
			width: 25%;
			background: #ffffff;
			bottom: -55rpx;
			right: 5%;
			border-radius: 15rpx;
		}
	}

	.mainBox {
		width: 750rpx;
		height: 300rpx;
		padding: 0 5%;
		margin-bottom: 10rpx;

		.mainBtn {
			width: 45%;
		}
	}

	.radius {
		border-radius: 18rpx !important;
	}

	// 弹窗
	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
	}

	.modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -100rpx;
		background-image: url(https://zhoukaiwen.com/img/qdpz/modal_bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.modal_main {
		text-align: left;
		background-color: #FFFFFF;
	}

	.title-header {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://cdn.zhoukaiwen.com/wccswF.png);
		background-size: cover;
	}

	.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	
	.gold-page-container {
		padding-top:10rpx;
		.product-list {
			padding: 0 30rpx;
		}
	}
	
	
	.notice-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid #f2f2f2;
		height: 150rpx;
		border-radius: 30rpx;
		background: #fff;
		font-size:40rpx;
	}
	
	.time {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		height: 80rpx;
		padding-top: 10rpx;
		font-size: 26rpx;
		color: #7d7d7d;
	}
	
	.content {
		width: 710rpx;
		padding: 0 24rpx;
		background-color: #fff;
		border-radius: 4rpx;
	}
	
	.title {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		font-size: 32rpx;
		color: #303133;
		flex-shrink: 0;
	}
	
	.img-wrapper {
		width: 100%;
		position: relative;
		
	}
	
	.pic {
		display: block;
		width: 100%;
		border-radius: 6rpx;
		height: 200rpx;
	}
	
	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		font-size: 36rpx;
		color: #fff;
	}
	
	.introduce {
		display: inline-block;
		padding: 16rpx 0;
		font-size: 28rpx;
		color: #606266;
		line-height: 38rpx;
	}
	
	.bot {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		font-size: 24rpx;
		color: #707070;
		position: relative;
	}
	
	.more-icon {
		font-size: 32rpx;
	}
</style>
